<template>
  <div class="shop">
    <div class="box">

      <div class="top"
           :style="{ 'filter': 'blur(8px)','background-image': 'url('+url+shopData.image_path+')'}">
      </div>
      <div class="top_detail">
        <div>
          <i class="iconfont icon-fanhui"
             @click="returnAct"></i>
          <img :src="url+shopData.image_path"
               alt="">
        </div>
        <div class="text">
          <h5>{{shopData.name}}</h5>
          <p class="fee">商家配送 / 分钟送达 / {{tips.piecewise_agent_fee.tips}} </p>
          <p>公告：{{shopData.promotion_info}}</p>
          <i class="iconfont icon-youjiantou"
             @click="detailAct(shopData.id)"></i>
        </div>
        <p class="discount"
           v-if="shopData.activities!=0?shopData.activities:''">
          <span class="cut"> {{shopData.activities[0].icon_name}} </span>
          <span> {{shopData.activities[0].description}} </span>
          <span class="cutDetail">
            <span> {{shopData.activities.length}} 个活动</span>
            <i class="iconfont icon-fanhui1"></i>
          </span>
        </p>
      </div>
      <div class="tit">

        <div class="goods">
          <p :class=" {'gds':true,'select':selectId ==index} "
             @click="selectAct(index)"
             v-for="(item,index) in txts"
             :key="index"> {{item}} </p>

        </div>
      </div>
    </div>
    <Goods v-if="selectId == 0"></Goods>
    <Comment v-if="selectId == 1"></Comment>
  </div>

</template>
<script>
import Goods from '@/components/Goods_f'
import Comment from '@/components/Comment_f'

export default {
  name: "Shop",
  components: {
    Goods,
    Comment
  },
  data: function () {
    return {
      url: "//elm.cangdu.org/img/",
      shopData: [],
      id: JSON.parse(localStorage.getItem('shopid')),
      tips: JSON.parse(localStorage.getItem('shop')),
      selectId: 0,
      txts: ['商品', '评价'],
      show: false,

      orderData: []
    }
  },
  created () {
    this.load.$emit('loading', true)
    // let shop = JSON.parse(localStorage.getItem('shop'));
    // console.log(shop)
    // this.shopData = shop;
    this.$axios.get('https://elm.cangdu.org/shopping/restaurant/' + this.id + '').then(res => {
      this.shopData = res.data;
      // console.log(this.id)
      // console.log(this.shopData)
    }).catch(err => console.log(err));
  },
  updated () {
    this.load.$emit('loading', false)
  },
  methods: {
    returnAct () {
      this.$router.go(-1);
    },
    detailAct (id) {
      // console.log(id)
      this.$router.push({ name: "ShopDetail" })
      localStorage.setItem('shopid', JSON.stringify(id))
    },
    selectAct (index) {
      console.log('**********')
      console.log(index)
      this.selectId = index;
    },

    // gets(v){
    // console.log(1111111111122222)
    // console.log(v);
    // this.orderData = v
    // console.log(this.orderData)
    // }
  }
}

</script>

<style lang="less" >
.shop {
  .van-overlay {
    z-index: 30 !important;
  }
  .van-popup {
    z-index: 30 !important;
  }

  .box {
    height: 150px;
  }
  .top {
    position: relative;
    background-color: white;
    width: 100%;
    height: 100px;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
  }
  .top_detail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 98px;
    background-color: rgba(119, 103, 137, 0.43);
    padding: 7px 0 10px 7px;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 21;
    i {
      color: #ffffff;
      font-weight: 900;
    }
    img {
      width: 67.5px;
      vertical-align: top;
    }
    div {
      display: inline-block;
      h5 {
        color: white;
      }
    }
    .text {
      padding-left: 7px;
      vertical-align: top;
      p {
        font-size: 12px;
        color: white;
        line-height: 25px;
      }
      i {
        position: absolute;
        top: 40%;
        right: 10px;
      }
    }
    .discount {
      padding: 0 10px;
      font-size: 12px;
      color: white;
      // margin-left: 13px;
      .cut {
        background-color: rgb(240, 115, 115);
        border-color: rgb(240, 115, 115);
        padding: 1px;
        border-radius: 2px;
        text-align: center;
        margin-right: 10px;
      }
      .cutDetail {
        float: right;
      }
    }
  }
  .tit {
    .goods {
      font-size: 15px;
      color: #333333;
      width: 100%;
      height: 53px;
      background-color: white;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-bottom: 1px solid #eeeeee;
      box-sizing: border-box;
      position: fixed;
      top: 98px;
      left: 0;
      right: 0;
      z-index: 30;
      .gds {
        display: inline-block;
        line-height: 35px;
        border-bottom: 2.5px solid white;
      }
      .select {
        color: #3190e8;
        line-height: 35px;
        border-bottom: 2.5px solid #3190e8;
      }
    }
  }
  .hide {
    display: none;
  }
}
</style>